<template>
  <div>
    <el-dialog
      :title="this.formData.id ? '编辑目录' : '新增目录'"
      :visible.sync="showDialog"
      @close="closeHandler"
      width="25%"
    >
      <el-form
        v-if="showDialog"
        :model="formData"
        :rules="formRules"
        ref="form"
        label-width="100px"
      >
        <el-form-item v-show="!id" prop="subjectID" label="所属学科">
          <el-select v-model="formData.subjectID" placeholder="">
            <el-option
              v-for="item in SubjectList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            v-model="formData.directoryName"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button size="small" @click="showDialog = false">取消</el-button>
          <el-button size="small" type="primary" @click="btnOk">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getSubjectListApi, getSubjectInfoApi } from "@/api/subjects";
import {
  adddirectoryApi,
  editdirectoryApi,
  getdirectoryListApi,
} from "@/api/directorys";
export default {
  name: "addDirectory",
  props: {
    id: {
      required: true, //必要性
    },
  },
  data() {
    //新增目录查重
    const checkdirectoryRepeat = async (rule, value, cb) => {
      //先找到所有的目录名称
      let { items } = await getdirectoryListApi({
        // directoryName: this.queryData.directoryName,
        page: 1,
        pagesize: 100,
        subjectID: this.id,
      });
      let isRepeat = false;
      if (this.formData.id) {
        isRepeat = items.some(
          (item) => item.id === this.formData.id && item.directoryName === value
        );
      } else {
        isRepeat = items.some((item) => item.directoryName === value);
      }
      // console.log(res, "7777777777");
      //找到兄弟们,判断是否和兄弟们同名
      // let isRepeat = false;
      // isRepeat = items.some((val) => {
      //   return val.subjectName === value;
      // });
      isRepeat ? cb(new Error(`已经存在${value}这个目录名称`)) : cb();
    };
    return {
      //新增和修改弹框的表单数据
      formData: {
        subjectName: "",
        directoryName: "",
        subjectID: "",
        // value: "",
        id: "",
      },
      formRules: {
        // subjectID: [{ message: "请选择", trigger: "blur" }],
        directoryName: [
          { required: true, message: "请输入目录名称", trigger: "blur" },
          { validator: checkdirectoryRepeat, trigger: "blur" },
        ],
      },
      showDialog: false,
      SubjectList: [],
    };
  },
  methods: {
    async getSubjectList() {
      //得到学科表格数据
      let { items } = await getSubjectListApi({
        subjectName: "",
        page: 1,
        pagesize: 100,
      });
      this.SubjectList = items;
    },
    //增加/修改目录提交数据
    async btnOk() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }
      if (this.formData.id) {
        //编辑操作
        await editdirectoryApi(this.formData);
        this.$message.success("修改成功");
        this.$emit("updateList");
      } else {
        //添加目录
        if (this.id) {
          let res = await getSubjectInfoApi(this.id);
          console.log(this.id, "7777777788888888888");
          // console.log(res, "9999999999999");
          await adddirectoryApi({
            directoryName: this.formData.directoryName,
            subjectID: res.id,
          });
        } else {
          await adddirectoryApi({
            directoryName: this.formData.directoryName,
            subjectID: this.formData.subjectID,
          });
        }
        this.$message.success("添加成功");
        this.$emit("updateList");
      }

      this.showDialog = false;
      this.formData = {};
    },
    //关闭事件
    closeHandler() {
      //表单重置
      this.formData = {
        subjectName: "",
        directoryName: "",
        subjectID: "",
        // value: "",
        id: "",
      };
    },
  },
  created() {
    this.getSubjectList();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: rgb(64, 158, 255);
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-dialog__close {
  color: #fff;
}
</style>